<script>
import {getGameAccount} from '@/api/game/account'

export default {
  name: 'Home',
  data() {
    return {
      isFullScreen: false,
      isConnected: false,
      imageBase64: '',
      loading: false,
      accountInfo: {},
      websocket: null,
      socketUrl: 'ws://your-websocket-server-url',
      moduleInfo: {
        name: '视频监控模块',
        status: '正常',
        lastUpdate: new Date()
      },
      logs: [
        {time: '2023-11-15 10:30:22', event: '系统启动'},
        {time: '2023-11-15 10:31:05', event: '连接成功'},
        {time: '2023-11-15 10:35:18', event: '接收图像数据'}
      ]
    };
  },
  computed: {
    boardStyle() {
      return {
        height: this.isFullScreen ? '100vh' : '35vh'
      };
    },
    accountStatus() {
      if (['3', '4'].includes(this.accountInfo.status)) {
        return {text: '当前账号异常', type: 'danger'};
      } else if (this.accountInfo.status === '1') {
        return {text: '已上线', type: 'success'};
      } else {
        return {text: '账号未上线', type: 'info'};
      }
    }
  },
  created() {
    this.getAccountInfo();
  },
  methods: {
    // 获取账号信息
    getAccountInfo() {
      getGameAccount()
        .then(response => {
          this.accountInfo = response.data;
        })
        .catch(error => {
          console.error('获取账号信息失败', error);
        });
    },
    toggleFullScreen() {
      this.isFullScreen = !this.isFullScreen;
    },
    connectWebSocket() {
      if (this.isConnected) {
        return;
      }

      this.loading = true;
      try {
        this.websocket = new WebSocket(this.socketUrl);

        this.websocket.onopen = () => {
          this.isConnected = true;
          this.loading = false;
        };

        this.websocket.onmessage = (event) => {
          try {
            const data = JSON.parse(event.data);
            if (data.code === 1000 && data.base64) {
              this.imageBase64 = data.base64;
            }
          } catch (error) {
            console.error('解析WebSocket消息失败:', error);
          }
        };

        this.websocket.onerror = (error) => {
          this.$message.error('连接异常');
          this.loading = false;
        };

        this.websocket.onclose = () => {
          this.isConnected = false;
          this.loading = false;
        };
      } catch (error) {
        this.$message.error('连接失败');
        this.loading = false;
      }
    },
    disconnectWebSocket() {
      if (this.websocket && this.isConnected) {
        this.websocket.close();
        this.isConnected = false;
      }
    }
  },
  beforeDestroy() {
    this.disconnectWebSocket();
  }
};
</script>

<template>
  <div class="video-board-container">
    <!-- 画板部分 -->
    <div
      v-loading="loading"
      :class="{ 'full-screen': isFullScreen }"
      :style="boardStyle"
      class="board-section">
      <div class="board-content">
        <img
          v-if="imageBase64"
          :src="'data:image/jpeg;base64,' + imageBase64"
          alt="实时图像"
          class="stream-image"
        />
        <div v-else class="no-image">
          <el-empty :image-size="100" description="暂无图像">
            <template #description>
              <p>{{ accountStatus.text }}</p>
            </template>
          </el-empty>
        </div>
      </div>

      <!-- 浮动控制按钮 -->
      <div class="floating-controls">
        <button v-if="isConnected" class="control-btn" @click="toggleFullScreen">
          <i :class="isFullScreen ? 'el-icon-zoom-out' : 'el-icon-zoom-in'"/>
        </button>
        <button

          v-if="accountStatus.type === 'success' && accountInfo.status === '1'"
          :class="{ 'connected': isConnected }"
          class="control-btn connect-btn"
          @click="isConnected ? disconnectWebSocket() : connectWebSocket()">
          <i :class="isConnected ? 'el-icon-circle-close' :'el-icon-connection'"/>
        </button>
      </div>
    </div>

    <!-- 模块信息部分 -->
    <div v-show="!isFullScreen" class="info-section">
      <div class="module-info">
        <div class="title">基本信息</div>
        <div class="info-item">
          <span class="label">游戏名称:</span>
          <span class="label">{{ moduleInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">当前状态:</span>
          <span :class="`status-${accountStatus.type}`" class="label">
            {{ accountStatus.text }}
          </span>
        </div>
        <div class="info-item">
          <span class="label">游戏账号:</span>
          <span class="label">{{ accountInfo.account || '未获取' }}</span>
        </div>
      </div>

      <div class="module-info">
        <div class="title">基本信息</div>
        <div class="info-item">
          <span class="label">游戏名称:</span>
          <span class="label">{{ moduleInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">当前状态:</span>
          <span :class="`status-${accountStatus.type}`" class="label">
            {{ accountStatus.text }}
          </span>
        </div>
        <div class="info-item">
          <span class="label">游戏账号:</span>
          <span class="label">{{ accountInfo.account || '未获取' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.video-board-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f7fa;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.board-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;

  &.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    margin: 0;
    border-radius: 0;
  }
}

.board-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;

  .stream-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;

    &:hover {
      transform: scale(1.01);
    }
  }

  .no-image {
    color: #909399;
    text-align: center;
    width: 100%;
    padding: 20px;
  }
}

.floating-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  z-index: 10;
  opacity: 0.6;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 1;
  }
}

.control-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  padding: 5px;
  font-size: 14px;
  color: black;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
  }

  &.connect-btn {

    &.connected {
      background-color: rgba(231, 76, 60, 0.85);

      &:hover {
        background-color: rgba(231, 76, 60, 1);
      }
    }
  }
}

.info-section {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.module-info {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .title {
    margin-top: 0;
    margin-bottom: 16px;
    text-align: center;
    font-size: 16px;
    color: #303133;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
  }
}

.info-item {
  display: flex;
  margin-bottom: 12px;
  align-items: center;

  .label {
    width: 100px;
    color: #606266;
    font-size: 14px;
  }

  .value {
    font-weight: 500;
    color: #303133;

    &.status-success {
      color: #67c23a;
    }

    &.status-danger {
      color: #f56c6c;
    }

    &.status-info {
      color: #909399;
    }
  }
}

.log-section {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  flex: 1;

  h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 18px;
    color: #303133;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.log-list {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #c0c4cc;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: #f5f7fa;
  }
}

.log-item {
  padding: 10px 12px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  font-size: 14px;
  transition: background-color 0.2s;

  &:hover {
    background-color: #f5f7fa;
  }

  &:last-child {
    border-bottom: none;
  }

  .log-time {
    color: #909399;
    margin-right: 12px;
    min-width: 160px;
    font-family: monospace;
  }

  .log-event {
    color: #303133;
  }
}

.empty-log {
  padding: 20px;
  text-align: center;
  color: #909399;
}

// 图标样式
.icon-maximize:before {
  content: "⤢";
  font-size: 16px;
}

.icon-minimize:before {
  content: "⤓";
  font-size: 16px;
}
</style>
